<template>
  <div class="ebook-slide-bookmark">
    <div class="slide-bookmark-title">
      <!-- {{ $t('book.bookmark') }} · {{ bookmark ? bookmark.length : 0 }} -->
      {{ $t('book.bookmark') }} · {{ total }}
    </div>
    <scroll class="slide-bookmark-list" :top="48" :bottom="48">
      <div
        class="slide-bookmark-item"
        v-for="(item, index) in showTotal()"
        :key="index"
        @click="displayBookmark(item.cfi)"
      >
        <div class="slide-bookmark-item-icon">
          <div class="icon-bookmark"></div>
        </div>
        <div class="slide-bookmark-item-text">{{ item.text }}</div>
      </div>
    </scroll>
  </div>
</template>

<script>
import { getBookmark } from '../../utils/localStorage'
import { ebookMixin } from '../../utils/mixin.js'
import Scroll from '../common/Scroll'
export default {
  mixins: [ebookMixin],
  components: {
    Scroll
  },
  data() {
    return {
      bookmark: null
    }
  },
  methods: {
    displayBookmark(cfi) {
      console.log(this.book)
      console.log(cfi)
      this.display(cfi, () => {
        this.hideTitleAndMenu()
      })
    }
  },
  mounted() {
    this.bookmark = getBookmark(this.fileName)
  }
}
</script>
<style lang="scss" scoped>
@import '../../assets/style/global';
.ebook-slide-bookmark {
  width: 100%;
  .slide-bookmark-title {
    width: 100%;
    height: px2rem(48);
    font-size: px2rem(14);
    font-weight: bold;
    padding: 0 px2rem(15);
    @include left;
    box-sizing: border-box;
  }
  .slide-bookmark-list {
    padding: 0 px2rem(15);
    box-sizing: border-box;
    .slide-bookmark-item {
      display: flex;
      @include center;
      padding: px2rem(10);
      .slide-bookmark-item-icon {
        flex: 0 0 px2rem(29);
        @include left;
        .icon-bookmark {
          width: px2rem(20);
          height: px2rem(20);
          font-size: px2rem(12);
          border-radius: 50%;
          background: #bbb;
          @include center;
        }
      }
      .slide-bookmark-item-text {
        font-size: px2rem(14);
        line-height: px2rem(15); // 解决英文问题
        max-height: px2rem(50);
        @include ellipsis2(3);
      }
    }
  }
}
</style>
